<template>
  <div class="rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all duration-500"
       :class="isDarkMode ? 'bg-gray-800 hover:shadow-gray-700/50' : 'bg-white hover:shadow-gray-300/50'">
    <!-- 个人资料卡片 -->
    <div class="p-6 border-b transition-colors duration-500" :class="isDarkMode ? 'border-gray-700' : 'border-gray-200'">
      <div class="flex items-start">
        <div class="flex-shrink-0 relative group">
          <div 
            class="w-24 h-24 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center text-white text-3xl transform transition-all duration-300 group-hover:scale-105"
          >
            {{ userInitials }}
          </div>
          <button 
            class="absolute inset-0 w-24 h-24 bg-black bg-opacity-40 rounded-full flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"
          >
            <font-awesome-icon icon="image" class="mr-1" />
            更换头像
          </button>
        </div>
        <div class="ml-6 flex-1">
          <h2 class="text-xl font-semibold transition-colors duration-500" :class="isDarkMode ? 'text-white' : 'text-gray-800'">{{ user?.username || '用户' }}</h2>
          <p class="transition-colors duration-500" :class="isDarkMode ? 'text-gray-400' : 'text-gray-500'">{{ user?.email || 'email@example.com' }}</p>
          
          <div class="mt-4 flex flex-col space-y-2">
            <div class="flex items-center text-sm transition-colors duration-500" :class="isDarkMode ? 'text-gray-300' : 'text-gray-600'">
              <font-awesome-icon icon="user" class="mr-2 w-4 transition-colors duration-500" :class="isDarkMode ? 'text-gray-500' : 'text-gray-400'" />
              <span>用户ID: {{ user?.id || 'N/A' }}</span>
            </div>
            <div class="flex items-center text-sm transition-colors duration-500" :class="isDarkMode ? 'text-gray-300' : 'text-gray-600'">
              <font-awesome-icon icon="calendar" class="mr-2 w-4 transition-colors duration-500" :class="isDarkMode ? 'text-gray-500' : 'text-gray-400'" />
              <span>注册时间: {{ registrationDate }}</span>
            </div>
          </div>
          
          <div class="mt-6 flex space-x-4">
            <button 
              @click="$emit('edit-profile')" 
              class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 shadow-sm flex items-center transform hover:scale-105 active:scale-95"
              :class="isDarkMode ? 'shadow-blue-900/20' : 'shadow-blue-300/20'"
            >
              <font-awesome-icon icon="pen" class="mr-2" />
              编辑资料
            </button>
            <button 
              @click="$emit('change-password')" 
              class="px-4 py-2 rounded-md transition-colors duration-200 flex items-center transform hover:scale-105 active:scale-95"
              :class="isDarkMode ? 'bg-gray-700 text-gray-300 hover:bg-gray-600' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
            >
              <font-awesome-icon icon="lock" class="mr-2" />
              更改密码
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, watch, onMounted } from 'vue';

const props = defineProps({
  user: {
    type: Object,
    default: () => ({})
  },
  isDarkMode: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['edit-profile', 'change-password']);

// 用户首字母头像
const userInitials = computed(() => {
  const username = props.user?.username || '用户';
  return username.charAt(0).toUpperCase();
});

// 格式化注册时间
const registrationDate = computed(() => {
  if (!props.user?.createdAt) return '未知';
  return new Date(props.user.createdAt).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
});

// 监听isDarkMode变化
watch(() => props.isDarkMode, (newVal) => {
  console.log('ProfileCard: isDarkMode changed to', newVal);
}, { immediate: true });

// 在组件挂载时检查isDarkMode状态
onMounted(() => {
  console.log('ProfileCard mounted with isDarkMode:', props.isDarkMode);
});
</script>

<style scoped>
.from-purple-500 {
  --tw-gradient-from: #8b5cf6;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(139, 92, 246, 0));
}
.to-pink-500 {
  --tw-gradient-to: #ec4899;
}
</style> 